<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
		综合练习
		// 编写一个有注册页面
		// 用户名				（英文开头小写，中间小写英文或者是数字，长度是6-20）
		// 密码					（英文或数字 6-20位)
		// 重复密码
		// 性别	
		// 邮箱					 网上搜正则表达式			
		// 电话号码				 网上搜正则表达式
		// 生日					要求格式 2001-06-15或者是2001/06/15
								年份是20开头    比如2001 
		// 注册按钮  清空按钮			
		// 使用正则表达式进行验证 
		-->

		<h1>用户注册</h1>
		<form>
			用户名:
			<input id="usernameInput" type="text" name="username" /> <br />
			密码:
			<input id="passwordInput" type="password" name="password" />
			<br />
			重复密码:
			<input id="passwordInput2" type="password" name="password2" />
			<br />
			性别:
			<input type="radio" name="sex" checked="checked"/>男
			<input type="radio" name="sex" />女
			<br />
			邮箱:
			<input id="emailInput" type="text" name="email"  />
			<br />
			电话号码:
			<input id="telInput" type="text" name="tel" />
			<br />
			生日:
			<input id="birthdayInput" type="date" name="birthday" />
			<br />

			<button type="button" onclick="check()">检测输入</button>
		</form>

		<script type="text/javascript">
			function check() {
				console.log("check()");
				// 1. 判断用户名
				// var username = document.getElementById("usernameInput").value;
				var username = usernameInput.value;
				var re1 = /^[a-z][a-z0-9]{5,19}$/;
				if (username.match(re1)) {
					alert("用户名符合要求");
				} else {
					alert("用户名不符合要求");
				}

				// 2. 判断密码
				
				// 3. 判断重复密码
				
				// 4. 判断邮箱
				var re4 = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				var email = document.getElementById("emailInput").value;
				if(email.match(re4))
				{
					alert("邮箱符合要求");
				} else {
					alert("邮箱不符合要求");
				}
				
				// 5. 判断电话
				
				// 6. 判断生日
				var birthday = document.getElementById("birthdayInput").value;
				console.log(birthday)
				// 2024-05-16
				var re6 = /^20\d{2}\-\d{2}\-\d{2}$/;
				if(birthday.match(re6))
				{
					alert("生日符合要求");
				} else {
					alert("生日不符合要求");
				}



			}
		</script>
	</body>
</html>
